<template>
  <div class="bg">
    <p>木子客服为您服务</p>
    <div class="one">
      <img src="../customer/cat.jpg" alt />
      <table>
        <span>您好!很高兴为您服务，请问有什么可以帮您？</span>
      </table>
    </div>
    <div class="two">
      <img src="../customer/cat1.jpg" alt />
      <table>
        <span>我想问这个商品什么时候发货？</span>
      </table>
    </div>
    <div class="one">
      <img src="../customer/cat.jpg" alt />
      <table>
        <span>您好!很高兴为您服务,购买成功将在24小时内发货。</span>
      </table>
    </div>
    <div class="two">
      <img src="../customer/cat1.jpg" alt />
      <table>
        <span>好的，谢谢。</span>
      </table>
    </div>
    <div class="one">
      <img src="../customer/cat.jpg" alt />
      <table class="Q">
        <span>不客气的哟~亲。</span>
      </table>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.bg {
  background: #e1e1e1;
}
p {
  font-size: 2vh;
  color: grey;
  text-align: center;
}
.one > img {
  width: 10vh;
  border-radius: 10vh;
  margin-top: 4vh;
  margin-left: 2vw;
}
.one table {
  width: 60vw;
  height: 8vh;
  background: white;
  position: relative;
  top: -9.5vh;
  left: 20vw;
  background: lightblue;
}
table > span {
  font-size: 2vh;
  color: gray;
}

.two > img {
  width: 10vh;
  border-radius: 10vh;
  margin-top: -4vh;
  margin-left: 2vw;
  float: right;
}
.two table {
  width: 60vw;
  height: 6vh;
  background: white;
  position: relative;
  top: -2vh;
  left: 22vw;
}
table > span {
  font-size: 2vh;
  color: gray;
}
.one .Q {
  width: 60xw;
  height: 6vh;
  margin-top: 1vh;
}
</style>